<template>
    <div class="wrapper">
      <com-header></com-header>
      <com-sidebar class="sidebar"></com-sidebar>
      <div class="main" :style="{left: collapse ? '64px' : '200px'}">
        <com-tags></com-tags>
        <keep-alive :include="tagComponent">
          <router-view class="main-cont"></router-view>
        </keep-alive>
      </div>
    </div>
  
  </template>
  
  <script>
    import comHeader from './Header.vue';
    import comSidebar from './Sidebar.vue';
    import comTags from './Tags.vue';
    import Bus from './bus';
    export default {
      name: "Base",
      components: {comHeader, comSidebar, comTags},
      data() {
        return {
          collapse: false,
          tagComponent: []
        }
      },
      created() {
  
        Bus.$on('collapse', isCollapse => {
  
          this.collapse = isCollapse;
        });
  
        // 只有在标签页列表里的页面才使用keep-alive，关闭标签之后就不保存到内存中了
        Bus.$on('tags', tagList => {
  
          for (let item of tagList) {
  
            item.name && this.tagComponent.push(item.name);
          }
        });
      }
    }
  </script>
  
  <style scoped lang="less">
    .wrapper {
      position: relative;
      height: 100%;
      overflow: hidden;
      background-color: #eee;
    }
    .sidebar, .main {
      position: absolute;
      top: 60px;
      bottom: 0;
    }
    .main {
      left: 200px;
      right: 0;
      padding: 20px;
      overflow: auto;
      transition: left .3s ease-in-out;
    }
    .main-cont {
      margin-top: 40px;
    }
  </style>
  